import { Revenuedata } from "../../../request/zwyApi";
import React, { useEffect, useRef } from "react";
import * as echarts from "echarts";
import { Table } from "antd";
import moduleCss from "../../../styles/RevenueData.module.css";

function PharmacyStatistics() {
  const chartRef = useRef(null);
  const pieChartRef = useRef(null);
  const myChart = useRef(null);
  const pieChart = useRef(null);

  const [tableData, setTableData] = React.useState([]);

  useEffect(() => {
    // 初始化柱状图
    myChart.current = echarts.init(chartRef.current);

    // 初始化饼图
    pieChart.current = echarts.init(pieChartRef.current);

    // 从API获取数据
    Revenuedata().then((res) => {
      if (res.code === 1) {
        const tableDataFromAPI = res.data.table;
        setTableData(tableDataFromAPI);

        const weightChartData = res.data.weightChart.data;
        const departmentChartData = res.data.departmentChart.otherData;

        // 将数据转换为ECharts格式
        const categories = weightChartData.map((item) => item.product);
        const seriesData = {
          内科综合: weightChartData.map((item) => item["内科综合"]),
          外科综合: weightChartData.map((item) => item["外科综合"]),
          超声科: weightChartData.map((item) => item["超声科"]),
        };

        // 柱状图配置
        const barOption = {
          tooltip: {
            trigger: "axis",
            axisPointer: { type: "shadow" },
          },
          legend: {
            itemHeight: 10,
            itemWidth: 16,
            textStyle: {
              fontSize: 10, // 设置图例字体大小
            },
            data: ["内科综合", "外科综合", "超声科"],
          },

          xAxis: {
            type: "category",
            data: categories,
            axisLabel: {
              rotate: 0, // 可以旋转标签以提高可读性
            },
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              name: "内科综合",
              type: "bar",
              data: seriesData["内科综合"],
            },
            {
              name: "外科综合",
              type: "bar",
              data: seriesData["外科综合"],
            },
            {
              name: "超声科",
              type: "bar",
              data: seriesData["超声科"],
            },
          ],
        };

        // 设置柱状图选项
        myChart.current.setOption(barOption);

        // 饼图配置
        const pieOption = {
          grid: [
            {
              top: "3%",
            },
          ],
          backgroundColor: "white",
          legend: {
            itemHeight: 10,
            itemWidth: 16,
            textStyle: {
              fontSize: 10, // 设置图例字体大小
            },
            orient: "horizontal",
            x: "center",
            y: "top",
            data: departmentChartData.map((item) => item.name),
          },
          series: [
            {
              name: "模块",
              type: "pie",
              selectedMode: "single",
              radius: [0, "30%"],
              itemStyle: {
                borderWidth: 1,
                borderColor: "white",
              },
              label: {
                normal: {
                  position: "inner",
                },
              },
              labelLine: {
                normal: {
                  show: false,
                },
              },
              data: departmentChartData.map((item) => ({
                name: item.name,
                value: item.value,
              })),
            },

            {
              name: "访问来源",
              type: "pie",
              radius: ["40%", "58%"],
              label: {
                normal: {
                  formatter:
                    "{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ",
                  backgroundColor: "#eee",
                  borderColor: "#aaa",
                  borderWidth: 1,
                  borderRadius: 4,
                  rich: {
                    a: {
                      color: "#999",
                      lineHeight: 16,
                      align: "center",
                    },
                    hr: {
                      borderColor: "#aaa",
                      width: "100%",
                      borderWidth: 0.3,
                      height: 0,
                    },
                    b: {
                      fontSize: 10,
                      lineHeight: 20,
                    },
                    per: {
                      color: "#eee",
                      backgroundColor: "#334455",
                      padding: [2, 4],
                      borderRadius: 2,
                    },
                  },
                },
              },
              data: departmentChartData.map((item) => ({
                name: item.name,
                value: item.value,
              })),
            },
          ],
        };

        // 设置饼图选项
        pieChart.current.setOption(pieOption);

        // 监听窗口大小变化以适应图表大小
        window.addEventListener("resize", () => {
          myChart.current.resize();
          pieChart.current.resize();
        });

        // 组件卸载时的清理操作
        return () => {
          window.removeEventListener("resize", () => {
            myChart.current.resize();
            pieChart.current.resize();
          });
          if (myChart.current) {
            myChart.current.dispose();
          }
          if (pieChart.current) {
            pieChart.current.dispose();
          }
        };
      } else {
        console.error("接口请求失败:", res.msg);
      }
    });
  }, []);

  const columns = [
    {
      title: "住院部",
      dataIndex: "name",
      key: "name",
      width: "250px",
    },
    {
      title: "本周服务医务数",
      dataIndex: "server",
      key: "server",
      width: "250px",
    },
    {
      title: "金额",
      dataIndex: "money",
      key: "money",
      width: "250px",
    },
    {
      title: "上周金额",
      dataIndex: "lastweek",
      key: "lastweek",
      width: "250px",
    },
    {
      title: "本月金额",
      dataIndex: "month",
      key: "month",
      width: "250px",
    },
    {
      title: "审计人员",
      dataIndex: "audit",
      key: "audit",
      width: "250px",
    },
    {
      title: "负责人",
      dataIndex: "chargeperson",
      key: "chargeperson",
      width: "250px",
    },
  ];

  return (
    <div style={{ display: "flex", flexWrap: "wrap" }}>
      <div ref={chartRef} style={{ width: "50%", height: "350px" }}></div>
      <div ref={pieChartRef} style={{ width: "50%", height: "350px" }}></div>

      <div>
        <div
          style={{ fontSize: "20px", paddingLeft: "10px" }}
          className={moduleCss.fontSize}
        >
          详情数据
        </div>
        <Table
          columns={columns}
          dataSource={tableData}
          rowKey="id"
          pagination={false}
          style={{ width: "100%", paddingLeft: "10px" }}
          className={moduleCss.hig}
        />
      </div>
    </div>
  );
}

export default PharmacyStatistics;
